Creating custom map marker pins for Google Maps, ExpressMaps and Mapbox

File Format

If you would like to use a custom image for your map marker pins, we offer the ability to upload your own marker images in PNG format. At this time, no other image formats are supported due to limitations in the Google Maps API and Mapbox APIs.

Full PNG transparency is supported and is recommended especially if you have non-rectangular markers or larger markers.

Size and Scale

For the best possible appearance of your marker pins on high resolution (also known as Retina) displays, we recommend creating a marker image that is twice the size of the size that you want it to appear on the map. For example, if you want your marker pin to appear as 40x40 pixels on the map, create a PNG file that is 80x80 pixels in size and then set the 'Scale' setting to 0.5 so it is shown at half the size.

This will allow the image to be automatically displayed at a higher resolution on Retina displays. This includes almost all modern mobile, laptop and desktop devices. Don't worry, the marker pins will be automatically shown in the correct size on low resolution displays. If you don't do this, your marker will still display fine on all devices, it will just be not as crisp as it could be on high resolution displays.

As a guideline, a good marker size is around 30-40 pixels in width / height so you should aim to create your images with dimensions of 60-80 pixels, which when the Scale is set to 0.5 will result in them appearing on your map as a 30-40 pixel marker.

Anchoring

Anchoring refers to which part of the marker pin is aligned to the coordinates of your store location on the map. The default is Bottom which is suitable for most marker shapes such as pins. In this case, the bottom center of the marker pin is the point which is anchored on the store location.

For other shapes such as circular markers, the marker should be anchored on the center of the marker in which case 'Center' should be selected as the Anchor point.

If the wrong anchoring option is chosen, you may notice that the map marker pin doesn't accurately reflect the correct location on the map particularly as you zoom into or out of the map so it is worth checking to confirm that you have this set correctly.